//导入函数
import { createRouter, createWebHistory } from 'vue-router'
import Home from "@/components/Home.vue";
import Login from "@/views/Login.vue";
import login from "@/views/Login.vue";


//创建Router的实例
const router = createRouter({
  //历史模式
  history: createWebHistory(import.meta.env.BASE_URL),
  //路由：数组形式
  routes: [
    {
      path:'/',//唯一的
      name: 'home',//小写的
      component: Home
    },
      //新闻
    {
      path: '/news',
      name: 'news',
      component:()=>import('@/components/News.vue'),
      //嵌套路由
      children:[
          //新闻详情页面路由
        {
         // path:'detail', // /news/detail
          path:':id', //匹配到/news/1001或者/news/1002之类的
          props: true,//才能使用props获取值
          component: ()=>import('@/components/Detail.vue')
        }
      ]
    },
      //详情路由
    {
      path:'/news2',
      name: 'detail',
      //使用问号传参，需要使用函数模式
      props:route=>({newsId: route.query.id}),// newsId是一个key，id：是传参的？后面的key（id=9001）
      component:()=>import('@/components/Detail.vue')
    },
    {
      path:'/news3',
      name: 'detail2',
      props:route=>({news: route.query.data}),
      component:()=>import('@/components/Detail.vue')
    },
      //关于我们
    {
      path:'/about',
      name: 'about',
      component:()=>import('@/components/About.vue')
    },
      //登录
    {
      path:'/login',
      name: 'login',
      component: Login
    },{
      path:'/remark',
      name:'remark',
      component: ()=>import('@/components/Remark.vue'),
      //路由独享守卫
      beforeEnter:(to,from)=>{
            //获取本地存储的用户信息
        let loginStatus = localStorage.getItem('loginStatus');
        if (!loginStatus || loginStatus!=='true'){
            alert('要评论，先登录')
            return false;
        }
      }
    }

  ],
})
//全局导航守卫的前置守卫
/*
* to:路由到哪里
* from：从哪个路由来
* */
/*router.beforeEach((to, from) => {
  //去哪里
  console.log('to：',to.fullPath)
  //从哪里来
  console.log('from:',from.path)
  //从本地存储中获取用户的身份
  let loginStatus= localStorage.getItem('loginStatus');
  console.log('用户身份：',loginStatus)
  //对路由的字符串进行判断，肯定要放行登录
  if (to.fullPath!=='/login' && loginStatus!=='true'){
    //说明没有登录
   // return false;//取消路由
    return {path:'/login'};//直接路由到登录页面,注意不要递归调用
  }else{
    return true;//继续路由
  }
})*/
//导出路由组件
export default router
